<template>
  <scroll-view
    scroll-y
    refresher-enabled
    refresher-background="lightgreen"
    :refresher-triggered="triggered"
    @refresherpulling="onPulling"
    @refresherrefresh="onRefresh"
    @scrolltolower="onLoad"
    @refresherrestore="onRestore"
    @refresherabort="onAbort"
    class="scroll-container"
  >
    <slot></slot>
  </scroll-view>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      triggered: false,
      freshing: false
    }
  },
  watch: {
    value (v) {
      if (v === true) {
        this.freshing = false
        this.triggered = false
      }
    }
  },
  methods: {
    onPulling (e) {
      this.triggered = true
    },
    onRefresh () {
      if (this.freshing) return
      this.freshing = true
      this.$emit('refresh')
    },

    onRestore (e) {
      console.log('onRestore:', e)
    },

    onAbort (e) {
      console.log('onAbort', e)
    },
    // 上拉加载
    onLoad () {
      console.log('scroll view will on load data')
      this.freshing = false
      this.triggered = false
      this.$emit('load')
    }
  }
}
</script>

<style lang="less" scoped>
.scroll-container {
  height: 100%;
}
</style>
